<template>
  <div style="position:relative;">
    <el-popover placement="bottom" ref="qrcode">
      公众版网址<br><a target="_blank" id="qrcodeLink"></a>
      <div id="qrcode"></div>
    </el-popover>
    <div>
      <el-button type="text" @click="$router.push('/project/'+$route.params.id)"><h2>{{project.name}}</h2>
      </el-button>
      <h3 style="display: inline-block">的 {{date}} 数据报告</h3>
      <el-button v-popover:qrcode type="primary"><i class="fa fa-qrcode"></i> 显示二维码</el-button>
    </div>

    <!--发送邮件-->
    <el-card v-if="$store.state.user.level.id <=3">
      <div slot="header">项目管理员功能：</div>
      <el-button type="success" @click="$router.push($route.path+'/preview')"><i
              class="fa fa-envelope"></i> 发送邮件
      </el-button>
      <div>
        最后发送时间：{{report.email_sent ? report.email_sent : '没有发送过邮件'}}
      </div>
    </el-card>

    <!--数据-->
    <report_platform_data :project="project" :platformTypes="platformTypes"/>

    <!--活跃主播-->
    <report_active_anchor :project="project" :date="date"/>

    <!--直播记录-->
    <report_schedules_data :project="project" :report="report" :schedules="schedules"
                           :editable="project.role !== -1"/>

    <!--评论-->
    <report_comment :report="report"/>
  </div>
</template>

<script>
  import Report_active_anchor from '../component/report_active_anchor';
  import Report_comment from '../component/report_comment';
  import Report_platform_data from '../component/report_platform_data';
  import Report_schedules_data from '../component/report_schedules_data';

  export default {
    components: {
      Report_schedules_data,
      Report_platform_data,
      Report_comment,
      Report_active_anchor,
    },
    data() {
      return {
        date: '',
        project: {
          id: '',
          name: '',
          role: -1,
          options: {hide: {cost: true, click: true, added: true, reflux: true, danmu: true}},
        },
        report: {email_sent: null},
        platformTypes: {},
        allPlatform: {keys: [], data: [], selected: 0},
        schedules: [],
        comment: {list: [], more: true, loading: false, posting: false, content: ''},
      };
    },
    methods: {
      async fetch(project_id, date) {
        const res = await this.$asyncHttp.get(`/api/project/${project_id}/report/${date}`);
        if (res instanceof Error)
          return this.$router.replace('/404');

        const data = res.data;
        this.project = data.project;
        if (!this.project.options.hide)
          this.project.options.hide = {danmu: true, coast: true, added: true, click: true, reflux: true};
        this.schedules = data.schedules;
        this.report = data.report;
        if (this.report.email_sent)
          this.report.email_sent = moment(this.report.email_sent).calendar();
        this.platformTypes = data.platformTypes;
        this.allPlatform.keys = Object.keys(data.platformTypes);
        this.allPlatform.data = Object.values(data.platformTypes);

        const publicUrl = 'http://' + window.location.host + '/vpr/' + data.report.index;
        setQrCode(publicUrl);
      },
    },
    mounted() {
      const {id: project_id, date} = this.$route.params;
      this.date = date;
      this.fetch(project_id, date);
    },
  };

  /**
   * 二维码
   * @param url
   */
  function setQrCode(url) {
    const typeNumber = 4;
    const errorCorrectionLevel = 'L';
    const qr = qrcode(typeNumber, errorCorrectionLevel);
    qr.addData(url);
    qr.make();
    document.querySelector('#qrcode').innerHTML += qr.createImgTag(8);
    const a = document.querySelector('#qrcodeLink');
    a.href = url;
    a.innerText = url;
  }
</script>

<style scoped>
  .fa-qrcode {
    font-size: 20px;
  }
</style>